<template>
  <div class="max-w-3xl mx-auto bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">酒精度计算器</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500">
        <p>根据原始和最终读数计算酒精体积百分比(ABV)。支持比重(SG)和柏拉图度(°P)。</p>
      </div>

      <!-- 单位切换 -->
      <div class="mt-4">
        <div class="flex items-center space-x-4">
          <span class="text-sm text-gray-700">单位选择:</span>
          <div class="flex items-center space-x-2">
            <button
              @click="unit = 'sg'"
              :class="[
                'px-3 py-1.5 text-sm font-medium rounded-md',
                unit === 'sg'
                  ? 'bg-brew-amber text-white'
                  : 'text-gray-700 bg-gray-100 hover:bg-gray-200'
              ]"
            >
              比重 (SG)
            </button>
            <button
              @click="unit = 'plato'"
              :class="[
                'px-3 py-1.5 text-sm font-medium rounded-md',
                unit === 'plato'
                  ? 'bg-brew-amber text-white'
                  : 'text-gray-700 bg-gray-100 hover:bg-gray-200'
              ]"
            >
              柏拉图度 (°P)
            </button>
          </div>
        </div>
      </div>
      
      <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
        <!-- 原始读数输入 -->
        <div>
          <label for="og" class="block text-sm font-medium text-gray-700">
            原始{{ unit === 'sg' ? '比重' : '柏拉图度' }} (OG)
          </label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="og"
              id="og"
              v-model="og"
              :step="unit === 'sg' ? '0.001' : '0.1'"
              :placeholder="unit === 'sg' ? '1.048' : '12.0'"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              @input="calculateABV"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">{{ unit === 'sg' ? 'SG' : '°P' }}</span>
            </div>
          </div>
        </div>

        <!-- 最终读数输入 -->
        <div>
          <label for="fg" class="block text-sm font-medium text-gray-700">
            最终{{ unit === 'sg' ? '比重' : '柏拉图度' }} (FG)
          </label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="fg"
              id="fg"
              v-model="fg"
              :step="unit === 'sg' ? '0.001' : '0.1'"
              :placeholder="unit === 'sg' ? '1.010' : '2.5'"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              @input="calculateABV"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">{{ unit === 'sg' ? 'SG' : '°P' }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- ABV 结果显示 -->
      <div class="mt-6">
        <div class="rounded-md bg-blue-50 p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <BeakerIcon class="h-5 w-5 text-blue-400" aria-hidden="true" />
            </div>
            <div class="ml-3 flex-1 md:flex md:justify-between">
              <p class="text-sm text-blue-700">
                预计酒精度 (ABV): <span class="font-medium">{{ abv }}%</span>
              </p>
              <p v-if="attenuation" class="mt-3 text-sm md:mt-0 md:ml-6 text-blue-700">
                发酵度: {{ attenuation }}%
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 计算公式说明 -->
      <div class="mt-6">
        <h4 class="text-sm font-medium text-gray-900">计算公式</h4>
        <div class="mt-2 text-sm text-gray-500 space-y-1">
          <template v-if="unit === 'sg'">
            <p>ABV = (OG - FG) * 131.25</p>
            <p>发酵度 = ((OG - FG) / (OG - 1)) * 100</p>
          </template>
          <template v-else>
            <p>ABV = (OG°P - FG°P) * 0.53</p>
            <p>发酵度 = ((OG°P - FG°P) / OG°P) * 100</p>
          </template>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-yellow-800">使用说明</h3>
            <div class="mt-2 text-sm text-yellow-700">
              <ul class="list-disc pl-5 space-y-1">
                <template v-if="unit === 'sg'">
                  <li>原始比重(OG)通常在 1.035-1.100 之间</li>
                  <li>最终比重(FG)通常在 1.005-1.020 之间</li>
                </template>
                <template v-else>
                  <li>原始柏拉图度(OG)通常在 8.75-23.75°P 之间</li>
                  <li>最终柏拉图度(FG)通常在 1.25-5.00°P 之间</li>
                </template>
                <li>最终读数必须小于原始读数</li>
                <li>温度校正至 20°C/68°F</li>
                <li>结果精确到小数点后1位</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { BeakerIcon } from '@heroicons/vue/24/outline'

const unit = ref('sg') // 'sg' 或 'plato'
const og = ref('')
const fg = ref('')
const abv = ref('0.0')
const attenuation = ref('')

// 柏拉图度转比重
function platoToSG(plato) {
  return (plato / (258.6 - ((plato / 258.2) * 227.1))) + 1
}

// 比重转柏拉图度
function sgToPlato(sg) {
  return (-1 * 616.868) + (1111.14 * sg) - (630.272 * Math.pow(sg, 2)) + (135.997 * Math.pow(sg, 3))
}

// 计算ABV和发酵度
function calculateABV() {
  if (!og.value || !fg.value || isNaN(og.value) || isNaN(fg.value)) {
    abv.value = '0.0'
    attenuation.value = ''
    return
  }

  let originalGravity = parseFloat(og.value)
  let finalGravity = parseFloat(fg.value)

  // 如果是柏拉图度，转换为比重进行计算
  if (unit.value === 'plato') {
    if (finalGravity >= originalGravity) {
      abv.value = '0.0'
      attenuation.value = ''
      return
    }
    // 使用柏拉图度直接计算
    const alcoholContent = (originalGravity - finalGravity) * 0.53
    abv.value = alcoholContent.toFixed(1)
    const att = ((originalGravity - finalGravity) / originalGravity) * 100
    attenuation.value = att.toFixed(1)
  } else {
    if (finalGravity >= originalGravity) {
      abv.value = '0.0'
      attenuation.value = ''
      return
    }
    // 使用比重计算
    const alcoholContent = (originalGravity - finalGravity) * 131.25
    abv.value = alcoholContent.toFixed(1)
    const att = ((originalGravity - finalGravity) / (originalGravity - 1)) * 100
    attenuation.value = att.toFixed(1)
  }
}

// 监听输入变化
watch([og, fg], calculateABV)

// 监听单位变化，在切换单位时转换数值
watch(unit, (newUnit, oldUnit) => {
  if (og.value && !isNaN(og.value)) {
    const ogValue = parseFloat(og.value)
    if (newUnit === 'plato' && oldUnit === 'sg') {
      og.value = sgToPlato(ogValue).toFixed(1)
    } else if (newUnit === 'sg' && oldUnit === 'plato') {
      og.value = platoToSG(ogValue).toFixed(3)
    }
  }
  
  if (fg.value && !isNaN(fg.value)) {
    const fgValue = parseFloat(fg.value)
    if (newUnit === 'plato' && oldUnit === 'sg') {
      fg.value = sgToPlato(fgValue).toFixed(1)
    } else if (newUnit === 'sg' && oldUnit === 'plato') {
      fg.value = platoToSG(fgValue).toFixed(3)
    }
  }
  
  calculateABV()
})
</script>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style> 